<template>
	<div class="process-wrapper" :class="{'addGray':addGray}">
		<div class="process-child" ref="processChild">
			<p class="process-animate" :class="{'addGray':addGray}"></p>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			addGray: {
				//置灰
				type: Boolean,
				default: false
			},
			progressWidth: {
				//进度条百分比
				type: Number,
				default: 0
			}
		},
		watch:{
			progressWidth:function(newValue){
				this.newprogressWidth(newValue);
			}
		},
		mounted() {
			this.newprogressWidth(this.progressWidth);
		},
		methods:{
			newprogressWidth(e){
				this.$nextTick(() => {
					this.$refs.processChild.style.width = e + "%"; //动态改变进度条
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.process-wrapper {
		width: 80%;
		height: 10rpx;
		margin:10rpx auto;
		border-radius: 0.1rem;
		background: #fff;
		border: 0.01rem solid #ff6780;

		&.addGray {
			background: #999;
			border: 0.01rem solid #999;
		}

		.process-child {
			position: relative;
			height: 100%;
			// width: 100%;  //这个width就是动态变化。通过js改变
			border-radius: inherit;

			.process-animate {
				background: #ff6780;
				position: absolute;
				left: 0;
				top: 0;
				bottom: 0;
				border-radius: inherit;
				animation: process 1s linear forwards;

				&.addGray {
					background: #999 !important;
					// border: 0.01rem solid #999;
				}
			}
		}
	}

	@keyframes process {
		0% {
			left: 0;
			right: 100%;
		}

		20% {
			right: 80%;
		}

		40% {
			right: 60%;
		}

		60% {
			right: 40%;
		}

		80% {
			right: 20%;
		}

		100% {
			right: 0;
		}
	}
</style>
